<template>
  <v-form v-model="valid" ref="myBrandForm">
    <v-text-field v-model="brand.name" label="请输入品牌名称" required hint="例如:oppo" :rules="[rules.required,rules.nameLength]"></v-text-field>
    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required hint="例如:O" :rules="[rules.letter]"></v-text-field>
    <v-cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"/>
    <v-layout row>
      <v-flex xs3><label style="color: rgba(0,0,0,.54); font-size: 16px">品牌LOG：</label></v-flex>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/image"
          :multiple="false"
          :pic-width="250" :pic-height="90"
        />
      </v-flex>
    </v-layout>
    <v-layout row my-3>
      <v-btn @click="closeDialog()" color="primary">关闭</v-btn>
      <v-spacer/>
      <v-btn @click="reset" color="primary">重置</v-btn>
      <v-btn @click="submit" color="primary">提交</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
    export default {
        name: "my-brand-form",
        data(){

          return {
              valid:false,
              brand:{
                id:'',
                name:'', //品牌名称
                letter:'', //首字母大写
                image:'', //图片
                categories:[] //所属标签
              },
            rules:{
                required:value => !!value || '品牌名必须填写',
                nameLength: value => value==null?false:value.length >=1 || '品牌名长度必须大于1',
                letter: value => /^[A-Z]{1}$/.test(value) || "品牌的首字母必须为1位大写字母"
            }
          }
        },
      methods:{
          reset(){
            this.$refs.myBrandForm.reset();
            this.brand.categories = [];
            this.brand.image='';
            this.brand.id = '';
          console.log(this.brand)
          },
          submit(){
            if(this.$refs.myBrandForm.validate()){
              // 2.定义一个请求参数对象，通过es6的解构表达式来获取brand中的属性
              const {categories, ...params} = this.brand;
              // 3.数据库中只需要保存商品分类的id即可，因此需要对categories处理，只获取id
              params.cids = categories.map(c=>c.id).join(",");
              alert(this.isEdit);
              // 4.提交数据
              //this.$http.post("/item/brand",this.$qs.stringify(params))
              this.$http({
                method:this.isEdit ? 'put':'post',
                url:'/item/brand',
                data:this.$qs.stringify(params)
              })
                .then(()=>{
                // 5.成功提示
                this.$emit("close");
                this.$message.success("保存成功！");
                //this.$refs.myBrandForm.reset();
                this.reset();
              }).catch(()=>{
                this.$message.error("保存失败！")
              })
            }
          },
        closeDialog(){
          this.reset();
          this.$emit("close");
        }
      },
      props:{
          oldBrand:{
            type:Object
          },
        isEdit:{
          type:Boolean,
          default:false
        },
        show:{
            type:Boolean,
            default:false
        }
      },
      watch:{
          oldBrand:{ //监控oldBrand的变化
            handler(val){
              if(val){
                //注意,不要直接赋值,否则会影响到父组件的数据,copy属性即可
                this.brand = Object.deepCopy(val);
              }else {
                this.brand={
                  name:'', //品牌名称
                  letter:'', //首字母大写
                  image:'', //图片
                  categories:[] //所属标签
                }
              }
            },
            deep:true
          }
      },


    }
</script>

<style scoped>

</style>
